<template>
  <div>
    <search-engine />
  </div>
  <div class="table_wrap">
    <el-table
      :data="tableData.value"
      style="width: 100%"
      :header-cell-style="{ fontSize: '20px' }"
      row-style="height:70px"
      class="resoutable"
      align="center"
      type="index"
      @row-click="hotDetail"
    >
      <el-table-column prop="rank" label="序号" width="200px" align="center">
      </el-table-column>
      <el-table-column
        prop="content"
        label="词条"
        width="700px"
        style="cursor: pointer"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import searchEngine from '../components/firstPage/searchEngine.vue'
import { reactive, onMounted } from 'vue'
import axios from 'axios'
import router from '@/router'
const tableData = reactive([])
onMounted(() => {
  test()
})

function test() {
  axios({
    url: 'http://localhost:8080/entry/hotChart',
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    console.log(JSON.stringify(res.data.data))
    tableData.value = res.data.data
    console.log(tableData.value)
  })
}

function hotDetail(row) {
  router.push('hotlistDetail?row=' + row.rank)
}
</script>
<style lang="scss">
.table_wrap {
  width: 70%;
  background-attachment: fixed;
  display: flex;
  margin-left: 200px;
}
</style>
